<template>
  <!--字符串-->
  <p>
    {{ str }}
    <!--页面展示：字符串-->
    {{ num + "aaa"
    }}<!--页面展示：1aaa-->
    {{ str.length }}
    <!--页面展示：3-->
    {{
      str
        .split("ll")
        .reverse()
        .join("aa")
    }}
  </p>
  <!--数值-->
  <p>
    {{ num }}
    <!--页面展示：1-->
    {{ num + num1 }}
    <!--页面展示：101-->
    {{ num > num1 }}
    <!--页面展示：false-->
    {{ num.toFixed(2) }}
  </p>
  <!--页面展示：1.00-->
  <!--boolean-->
  <p>{{ flag }}</p>
  <!--页面展示：true-->
  <!--数组-->
  <p>
    {{ arr }}
    <!--页面展示：[1,2,3,4]-->
    {{ arr[3] }}
  </p>
  <!--页面展示：4-->
  <!--对象-->
  <p>
    {{ obj }}
    <!--页面展示：{"name":"虫虫","age":20}-->
    {{ obj.name }}
  </p>
  <!--页面展示：虫虫-->
  <!--三目运算符-->
  <p>{{ num > num1 ? "是" : "否" }}</p>
  <!--页面展示：否-->
</template>

<script>
import { reactive, toRefs } from "vue";

export default {
  setup() {
    const state = reactive({
      str: "Hello",
      num: 1,
      num1: 100,
      flag: true,
      arr: [1, 2, 3, 4],
      obj: {
        name: "虫虫",
        age: 20,
      },
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>
